<template>
  <div>
    <div class="comment">
      <div class="item">
        <div class="user">
          <div class="info">
            <van-image round width="35px" height="35px" :src="$http.defaults.baseURL+commentData.user.head_img" />
            <div class="name_time">
              <p>{{commentData.user.nickname}}</p>
              <span>2小时前</span>
            </div>
          </div>
          <div class="reply" @click="replyComment">回复</div>
        </div>
        <!-- 评论框 -->
        <Parent @replyComment="reply" :data="commentData.parent" :deep="deep" />
        <p>{{commentData.content}}</p>
      </div>
    </div>
  </div>
</template>
<script>
import Parent from './Parent'
export default {
  props: ['commentData'],
  data(){
    return{
      deep:0
    }
  },
  created() {
    //传入这条评论信息，计算深度
    this.getDeep(this.commentData)
  },
  methods: {
    // 递归计算楼层深度
    getDeep(commentData){
      if(commentData.parent){
        this.deep++;
        return this.getDeep(commentData.parent)
      }
    },
    // 主评论的回复事件
    replyComment(){
      this.$emit('replyComment',{
        id:this.commentData.id,
        nickname:this.commentData.user.nickname
      })
    },
    // 监听子组件的回复事件
    reply(obj){
      // 再一次发接收的数据传出去
      this.$emit('replyComment',obj)
    }
  },
  components: {
    Parent
  }
}
</script>
<style lang="less" scoped>
//第一条评论
.comment {
  .item {
    border-bottom: 0.278vw solid #ccc;
    margin-bottom: 5.556vw;
  }
  h3 {
    font-weight: 300;
    text-align: center;
    margin: 8.333vw auto 5.556vw;
  }
  .user {
    padding: 0 4.167vw;
    display: flex;
    justify-content: space-between;
    margin-bottom: 2.778vw;
    .info {
      display: flex;
      .name_time {
        margin-left: 2.778vw;

        font-size: 3.889vw;
        line-height: 5vw;
        span {
          font-size: 3.333vw;
          color: #707070;
        }
      }
    }
    .reply {
      font-size: 3.333vw;
      color: #707070;
    }
  }
}
.comment .item > p {
  font-size: 3.889vw;
  padding: 4.167vw;
}
// 第二条评论

.comments {
  padding: 4.167vw;
  margin: 0 4.167vw;
  border-bottom: 0.278vw solid #ccc;
  border-left: 0.278vw solid #ccc;
  border-right: 0.278vw solid #ccc;
  &&:first-child {
    border-top: 0.278vw solid #ccc;
  }
  .ct {
    display: flex;
    justify-content: space-between;
    .left {
      font-size: 3.333vw;
      i {
        font-style: normal;
        font-size: 3.889vw;
        margin: 0 4.167vw 0 1.389vw;
      }
      span {
        // font-size: 3.333vw;
        color: #707070;
      }
    }
    .right {
      font-size: 3.333vw;
      color: #707070;
    }
  }
  .cf {
    padding-top: 4.167vw;
    font-size: 3.889vw;
  }
}
</style>